﻿@{
    Layout = "_Layout";
}
<div id="app">
    <el-row>
        <el-col :span="24">
            <div class="grid-content bg-purple-dark">
                <el-select v-model="filterFlag" placeholder="模块状态">
                    <el-option :key="0" label="所有" value="">
                    </el-option>
                    <el-option :key="1" label="正常" :value="true">
                    </el-option>
                    <el-option :key="2" label="禁用" :value="false">
                    </el-option>
                </el-select>
                <el-select v-model="filterType" placeholder="类型">
                    <el-option :key="0" label="所有" value="">
                    </el-option>
                    <el-option :key="1" label="通用" value="0">
                    </el-option>
                    <el-option :key="2" label="平台" :value="1">
                    </el-option>
                    <el-option :key="3" label="机构" :value="2">
                    </el-option>
                </el-select>
                <el-input v-model="filterModuleName" placeholder="模块名称" style="width:300px;" clearable></el-input>
                <el-button type="primary" v-on:click="searchModule">搜索</el-button>
                <el-button type="primary" v-on:click="add">添加模块</el-button>
            </div>
        </el-col>
    </el-row>
    <hr class="line-gray" />
    <el-row>
        <div class="table-container">
            <el-table :data="tableData" style="width:100%" row-key="id" default-expand-all>
                <el-table-column type="index" width="50" label="编号">

                </el-table-column>
                <el-table-column label="模块名称" width="170" property="name">

                </el-table-column>
                <el-table-column label="适用" width="100" property="type">
                    <template slot-scope="scope">
                        <span v-if="scope.row.type===0" style="color:#909399">通用</span>
                        <span v-else-if="scope.row.type===1" style="color:red">平台</span>
                        <span v-else style="color:green">机构</span>
                    </template>
                </el-table-column>
                <el-table-column label="英文标识" width="100" property="sn">

                </el-table-column>
                <el-table-column label="图标" width="80" property="icon">
                    <template slot-scope="scope">
                        <i :class="scope.row.icon"></i>
                    </template>
                </el-table-column>
                <el-table-column label="URL" width="200" property="url">
                </el-table-column>
                <el-table-column label="类型" width="100" property="isDirectory">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isDirectory" style="color:#F56C6C">目录</span>
                        <span v-else style="color:#909399">普通模块</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="60" property="flag">
                    <template slot-scope="scope">
                        <span v-if="scope.row.flag" style="color:#909399">正常</span>
                        <span v-else style="color:#F56C6C">禁用</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" v-on:click="editModule(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" v-on:click="deleteModule(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-row>
    <el-dialog title="添加模块" :visible.sync="addDialogVisible" width="500px" v-on:close="resetForm" :close-on-click-modal="false">
        <el-form :model="module" :label-width="formLabelWidth" ref="moduleForm" :rules="rules">
            <el-row>
                <el-col :span="12">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="模块类型">
                            <el-select v-model="module.type" placeholder="选择模块类型" v-on:change="typeChangeHandler" :disabled="moduleTypeDisabled">
                                <el-option :key="0" label="通用" :value="0">
                                </el-option>
                                <el-option :key="1" label="平台" :value="1">
                                </el-option>
                                <el-option :key="2" label="机构" :value="2">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    
                </el-col>
                <el-col :span="12">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="父级模块">
                            <el-select v-model="module.parentModuleId" placeholder="请选择父级" v-on:change="parentModuleChange" clearable style="width:100%;" v-bind:disabled="parentDisabled">
                                <el-option v-for="item in parentModules"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="名称" prop="name">
                            <el-input v-model="module.name" autocomplete="off" clearable></el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content bg-purple-dark">
                        <el-form-item label="图标" prop="icon" v-bind:disabled="module.isDirectory">
                            <el-input v-model="module.icon" autocomplete="off" clearable>
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="英文名称" prop="sn">
                        <el-input v-model="module.sn" autocomplete="off" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="状态">
                        <el-radio-group v-model="module.flag">
                            <el-radio :label="true">正常</el-radio>
                            <el-radio :label="false">禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="URL" prop="url">
                        <el-input v-model="module.url" autocomplete="off" :disabled="urlDisabled"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="排序" prop="sortNumber">
                        <el-input type="number" v-model="module.sortNumber" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="目录">
                        <el-radio-group v-model="module.isDirectory" v-on:input="isDirectoryChange" v-bind:disabled="isDirectoryDisabled">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button v-on:click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" v-on:click="submit">保存</el-button>
        </div>
    </el-dialog>
</div>
<script>
    var validatePass = (rule, value, callback) => {
        if (!app.module.isDirectory && !value) {
            callback(new Error('请输入Url'));
        }
        else {
            callback();
        }
    };
    var app = new Vue({
        el: "#app",
        data: {
            isDirectoryDisabled:false,
            parentDisabled:false,
            moduleTypeDisabled:false,
            urlDisabled:false,
            filterType:null,
            filterFlag: null,
            filterModuleName: '',
            addDialogVisible: false,
            tableData: [],
            parentModules: [],
            formLabelWidth: '80px',
            module: {
                id:null,
                name: 'dada',
                desc: '',
                type: 0,
                sn: '',
                parentModuleId: null,  
                icon: '',
                url: '',
                sortNumber: 0,
                flag: true,
                isDirectory:false
            },
            rules: {
                name: [
                    { required: true, message: '请输入模块名称', trigger: 'blur' }
                    
                ],
                desc: [
                    { required: true, message: '请输入模块描述', trigger: 'blur' }
                ],
                sn: [
                    { required: true, message: '请输入英文名称', trigger: 'blur' }
                ],
                icon: [
                    { required: true, message: '请输入图标名称', trigger: 'blur' }
                ],
                url: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                sortNumber:[
                    { required: true, message: '请输入排序数字', trigger: 'blur' },
                    { pattern: /^\d+$/, message: '请输入正整数', trigger: 'change' }
                ]
            }
        },
        methods: {
            typeChangeHandler(val) { 
                let that = this;
                axios.get(`/api/module/get-parent-modules?id=${that.module.id}&type=${val}`)
                    .then((res) => {
                        if (res.data.code === 0) {
                            that.parentModules = res.data.data;
                        }
                    })
            },
            parentModuleChange(val) {
                let that = this;
                if (!val) { 
                    that.module.parentModuleId = null;
                }
            },
            getParentModules() {
                let that = this;
                axios.get(`/api/module/get-parent-modules?id=${that.module.id}&type=${that.module.type}`)
                    .then((res) => { 
                        
                        if (res.data.code === 0) { 
                            that.parentModules = res.data.data;
                        }
                    })
            },
            isDirectoryChange(value) { 
                let that = this;
                if (value) {
                    that.module.parentModuleId = null;
                    that.module.url = null;
                    that.module.icon = "el-icon-folder";
                    that.parentDisabled = true;
                }
                else 
                {
                    that.parentDisabled = false;
                }
            },
            add() {
                let that = this;
                that.isDirectoryDisabled = false;
                that.parentDisabled = false;
                that.moduleTypeDisabled = false;
                that.urlDisabled = false;
                that.module.id = null;
                that.module.type = 0;
                that.module.name = '';
                that.module.desc = '';
                that.module.sn = '';
                that.module.parentModuleId = null;
                that.module.icon = '';
                that.module.url = '';
                that.module.flag = true;
                that.module.isDirectory = false;
                that.getParentModules();
                that.addDialogVisible = true;
            },
            // 提交新建账户
            submit() {
                var that = this;
                that.$refs['moduleForm'].validate((valid) => {
                    if (valid) {
                        axios.post("/api/module/module-submit", that.module)
                            .then((res) => {
                                
                                if (res.data.code === 0) {
                                    that.$message({
                                        message: res.data.msg,
                                        type: 'success'
                                    });
                                    that.addDialogVisible = false;
                                    that.loadTableData();
                                    that.resetForm();
                                }
                                else {
                                    that.$message({
                                        message: res.data.msg,
                                        type: 'error'
                                    });
                                }
                            });
                    }
                });
            },
            editModule(index,row) {
                var that = this;
                that.module.id = row.id
                that.module.name = row.name;
                that.module.sn = row.sn;
                that.module.type = row.type;
                if (!row.isDirectory ) {
                    that.module.parentModuleId = row.parentModuleId
                    that.parentDisabled = true;
                    that.urlDisabled = false;
                }
                else {
                    that.module.parentModuleId = null;
                    that.parentDisabled = true;
                    that.urlDisabled = true;
                }
                that.moduleTypeDisabled = true;
                
                that.isDirectoryDisabled = true;
                that.module.isDirectory = row.isDirectory;
                that.module.parentModuleId = row.parentId === 9999 ? null : row.parentId;
                that.module.icon = row.icon
                that.module.url =row.url;
                that.module.flag = row.flag
                that.addDialogVisible = true;
                that.getParentModules();
            },
            deleteModule(index,row) {
                var that = this;
                let msg = row.children && row.children.length > 0 ?"目录连同其子模块将被删除，是否继续？": '模块将被删除, 是否继续?';
                that.$confirm(msg, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get(`/api/module/delete-module?id=${row.id}`)
                        .then((res) => {
                            
                            if (res.data.code === 0) {
                                that.$message({
                                    message: res.data.msg,
                                    type: 'success'
                                });
                                that.addDialogVisible = false;
                                that.searchModule();
                            }
                            else {
                                that.$message({
                                    message: res.data.msg,
                                    type: 'error'
                                });
                            }
                        });
                });
            },
            // 加载表格数据
            loadTableData() {
                let that = this;
                axios.get(`/api/module/get-module-list`)
                    .then((res) => {
                        if (res.data.code == 0) {
                            that.tableData = res.data.data;
                        }
                    });
            },
            // 搜索模块
            searchModule() {
                let that = this;
                axios.get(`/api/module/search-module?filterFlag=${that.filterFlag}&name=${that.filterModuleName}&type=${that.filterType}`)
                    .then((res) => {
                        if (res.data.code == 0) {
                            that.tableData = res.data.data;
                        }
                    });
            },
            resetForm() {
                let that = this;
                that.$refs['moduleForm'].resetFields();
                that.isDirectoryDisabled = false;
            }
        },
        created() {
            var that = this;
            that.loadTableData();
        },
        mounted() {

        }
    });

    
</script>
<style>

</style>